<template>
  <div class="attendance-container">
    <h1>学生考勤打卡</h1>
    
    <!-- 显示当前用户信息 -->
    <div class="user-info">
      <p>欢迎，{{ userProfile.fullName }} (学生)</p>
      <router-link to="/student/dashboard">返回Dashboard</router-link>
    </div>

    <!-- 显示当前时间 -->
    <div class="current-time">
      <h2>当前时间: {{ currentTime }}</h2>
    </div>

    <div class="clock-section">
      <h2>考勤打卡</h2>
      <div class="clock-buttons">
        <button @click="clockInMorning" :disabled="morningDisabled" class="clock-in-btn">
          早上签到
        </button>
        <button @click="clockOutAfternoon" :disabled="afternoonDisabled" class="clock-out-btn">
          下午签退
        </button>
      </div>
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>

    <!-- 成功提示 -->
    <div v-if="success" class="success-message">
      {{ success }}
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'StudentClock',
  setup() {
    // 用户信息
    const userProfile = ref({});
    const studentNumber = ref(''); // 存储学号
    
    // 时间显示
    const currentTime = ref(new Date().toLocaleString('zh-CN'));
    let timer = null;
    
    // 状态信息
    const error = ref('');
    const success = ref('');
    const morningDisabled = ref(false);
    const afternoonDisabled = ref(false);

    // 获取用户信息
    const loadUserProfile = async () => {
      try {
        const response = await fetch('/user/profile', {
          method: 'GET',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json'
          }
        });
        
        const result = await response.json();
        if (result.code === 1) {
          userProfile.value = result.data;
          // 保存学号
          if (result.data.studentNumber) {
            studentNumber.value = result.data.studentNumber;
          }
        } else {
          error.value = result.msg || '获取用户信息失败';
        }
      } catch (err) {
        error.value = '网络错误，请稍后重试';
      }
    };

    // 更新当前时间
    const updateTime = () => {
      currentTime.value = new Date().toLocaleString('zh-CN');
    };

    // 早上签到
    const clockInMorning = async () => {
      if (!studentNumber.value) {
        error.value = '无法获取学号信息';
        return;
      }
      
      try {
        const response = await fetch('/attendance/clock-in-morning', {
          method: 'POST',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          body: `studentNumber=${studentNumber.value}`
        });
        
        const result = await response.json();
        if (result.code === 1) {
          success.value = result.msg || '签到成功';
          morningDisabled.value = true;
        } else {
          error.value = result.msg || '签到失败';
        }
      } catch (err) {
        error.value = '网络错误，请稍后重试';
      }
    };

    // 下午签退
    const clockOutAfternoon = async () => {
      if (!studentNumber.value) {
        error.value = '无法获取学号信息';
        return;
      }
      
      try {
        const response = await fetch('/attendance/clock-out-afternoon', {
          method: 'POST',
          credentials: 'include',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          body: `studentNumber=${studentNumber.value}`
        });
        
        const result = await response.json();
        if (result.code === 1) {
          success.value = result.msg || '签退成功';
          afternoonDisabled.value = true;
        } else {
          error.value = result.msg || '签退失败';
        }
      } catch (err) {
        error.value = '网络错误，请稍后重试';
      }
    };

    // 初始化
    onMounted(async () => {
      await loadUserProfile();
      // 每秒更新时间
      timer = setInterval(updateTime, 1000);
    });

    // 清理定时器
    onUnmounted(() => {
      if (timer) {
        clearInterval(timer);
      }
    });

    return {
      userProfile,
      currentTime,
      error,
      success,
      morningDisabled,
      afternoonDisabled,
      clockInMorning,
      clockOutAfternoon
    };
  }
};
</script>

<style scoped>
.attendance-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.user-info {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.current-time {
  background-color: #e3f2fd;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: center;
}

.current-time h2 {
  margin: 0;
  color: #1976d2;
}

.clock-section {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}

.clock-buttons {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}

.clock-in-btn, .clock-out-btn {
  padding: 15px 30px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.clock-in-btn {
  background-color: #4CAF50;
  color: white;
}

.clock-in-btn:hover:not(:disabled) {
  background-color: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.clock-out-btn {
  background-color: #2196F3;
  color: white;
}

.clock-out-btn:hover:not(:disabled) {
  background-color: #1976d2;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.clock-in-btn:disabled, .clock-out-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.success-message {
  background-color: #d4edda;
  color: #155724;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}
</style>